<template>
  <div class="userStatistics-container common-container">
    <div class="common-top">
      <span class="left">
        <el-date-picker
          v-model="timeArr"
          type="datetimerange"
          range-separator="至"
          :default-time="['00:00:00', '23:59:59']"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-button
          type="primary"
          style="margin-left: 10px"
          @click.stop="getData"
        >查询</el-button
        >
      </span>
    </div>
    <div class="common-bot">
      <LineChart :chart-data="lineChartData" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import HhxApi from "@/api/index";
import LineChart from "./components/LineChart";
import {userStatistics,} from '@/api/user'
export default {
  name: "statisticsUser",
  components: { LineChart },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      limit: 30,
      nowPage: 1,
      totalElement: 0,
      timeArr: ["", ""],
      lineChartData: {
        //
        legendData: [],
        xData: [],
        total: [], //总用户
        active: [], //活跃人数
        newer: [], //新用户
        pay: [], //支付人数
        refund: [], //退款人数
      },
    };
  },
  methods: {
    beginTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let startTime = year + "-" + month + "-" + "01" + " 00:00:00";
      // return new Date(startTime).getTime() ;
      return startTime;
    },
    getDayDiff(s1, s2) {
      let days = new Date(s2).getTime() - new Date(s1).getTime();
      let time = parseInt(days / (1000 * 60 * 60 * 24)) + 1;
      return time;
    },
    lastTime(year, month) {
      if (month.length <= 1) {
        let month = "0" + month;
      }
      let day = new Date(year, month, 0);
      let lastdate = year + "-" + month + "-" + day.getDate();
      let lastTime = lastdate + " 23:59:59";
      // return new Date(lastTime).getTime() ;
      return lastTime;
    },
    formatTime() {
      let dayCount = this.getDayDiff(this.timeArr[0], this.timeArr[1]);

      let start = new Date(this.timeArr[0]).Format("yyyy/MM/dd");
      let last = new Date(this.timeArr[1]).Format("yyyy/MM/dd");
      start = new Date(start).getTime();
      last = new Date(last).getTime();
      let day = 1000 * 60 * 60 * 24;
      let xData = [];
      for (let i = 0; i < dayCount; i++) {
        let time = new Date(Number(start) + day * i).Format("yyyy/MM/dd");
        xData.push(time);
      }
      return xData;
    },
    getData() {
      if (!this.timeArr || !this.timeArr.length || !this.timeArr[0]) {
        this.$message.error("请选择时间");
        return;
      }
      let dayCount = this.getDayDiff(this.timeArr[0], this.timeArr[1]);
      userStatistics({
          startTime: new Date(this.timeArr[0]).getTime(),
          endTime: new Date(this.timeArr[1]).getTime(),
          limit: dayCount,
          page: this.nowPage - 1,
        })
        .then((res) => {
          let total = [];
          let newer = [];
          let pay = [];
          let active = [];
          let refund = [];
          let xData = this.formatTime();
          for (let i = 0; i < xData.length; i++) {
            total.push(0);
            newer.push(0);
            pay.push(0);
            active.push(0);
            refund.push(0);
          }
          for (let i = 0; i < xData.length; i++) {
            for (let j = 0; j < res.data.length; j++) {
              if (
                xData[i] ==
                new Date(res.data[j].createTime).Format("yyyy/MM/dd")
              ) {
                total[i] = res.data[j].total;
                newer[i] = res.data[j].newer;
                pay[i] = res.data[j].pay;
                active[i] = res.data[j].active;
                refund[i] = res.data[j].refund;
              }
            }
          }
          this.$set(this.lineChartData, "total", total);
          this.$set(this.lineChartData, "newer", newer);
          this.$set(this.lineChartData, "pay", pay);
          this.$set(this.lineChartData, "active", active);
          this.$set(this.lineChartData, "refund", refund);
          this.$set(this.lineChartData, "xData", xData);
          console.log(this.lineChartData,"lineChartData 首页");
        });
    },
  },
  mounted() {
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;

    this.timeArr = [this.beginTime(year, month), this.lastTime(year, month)];
    let legendData = [
      "总用户",
      "新用户",
      "支付人数",
      "活跃人数",
      "退款人数",
    ];
    this.$set(this.lineChartData, "legendData", legendData);
    this.$nextTick(() => {
      this.getData();
    });
  },
};
</script>

<style lang="scss" scoped></style>
